<template>
  <div class="imgUpload">
    <!-- 用来上传的 -->
    <!-- 
      action： 上传图片的地址（会自动上传到这个地址）

        默认发的是post请求
      list-type="picture-card" 就是设置为照片墙效果
      :on-preview： 当点击预览图标触发的钩子
      :on-remove：  当点击删除图标触发的钩子
      file-list： 保存上传的图片的数组
     -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :class="{ disabled: isDisabled }"
      :file-list="fileList"
      :http-request="doUpload"
      :on-change="handleChange"
    >
      <!-- 
        on-preview :点击文件列表中已上传的文件时的钩子
        on-remove:文件列表移除文件时的钩子
     -->
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="showProg" style="width: 180px" :percentage="percent" />
    <!-- 预览图片对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 导入腾讯云
import COS from "cos-js-sdk-v5";
// 实例化一个对象
const cos = new COS({
  // 秘钥ID
  SecretId: "AKID2xgARVLzPbYLtELEtJVSAgz4vXu3xc3G",
  // 秘钥key
  SecretKey: "1nLeiX9aooaLwLVRAg0963sUs9yfBVcT"
});

export default {
  name: "ImgUpload",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      // 进度条
      percent: 0,
      // 进度条是否开启显示
      showProg: false
    };
  },
  methods: {
    // 文件状态改变触发
    handleChange(file, fileList) {
      // 针对网速慢 点击完上传图片后 还可以多次点击上传按钮
      // file就是改变的图片（如果你是添加的话，file就是添加的这张图片）
      // fileList 就是改编后的文件数组
      // 因为我们只能添加一张，那么这里的fileList就是长度唯一的数组
      // 赋值给this.fileList，this.fileList就有值了，有值就能让那个可以上传的框隐藏了
      this.fileList = fileList;
    },
    //   文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      // 点击删除后直接清空数组那么就可以再次添加了
      this.fileList = [];
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    doUpload(params) {
      // console.log("我上传了", params);
      this.showProg = true;
      cos.putObject(
        {
          // 储存桶名称
          Bucket: "lc7788-1306809187" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          // 储存桶名字
          Key: params.file.name /* 必须 */,
          // 上传方式  STANDARD 常用
          StorageClass: "STANDARD",

          Body: params.file, // 上传文件对象

          // 是一个回调函数：上传进度管理
          onProgress: function(progressData) {
            // console.log(JSON.stringify(progressData));
            // console.log(progressData.percent);
            // 控制进度条时间
            this.percent = progressData.percent * 100;
          }.bind(this)
        },
        // 上传成功或失败会有一个回调函数
        // 如果err有值代表失败了，如果没有值代表成功了
        function(err, data) {
          if (!err) {
            // 上传成功后的图片地址在data.Location
            // console.log(data);
            this.fileList = [{ url: "http://" + data.Location }];
          }
          this.percent = 0;
          this.showProg = false;
          // 可以使用箭头函数 这样不用修改this的指向
        }.bind(this)
      );
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length > 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.imgUpload {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
